<template>
  <div class="boxs">
    <div class="boxs-top"><titles :title="props.info.text" /> <textMax :data="props.info.remarks" :maxLen="80" /></div>
    <t-row :gutter="20">
      <t-col :span="2" v-for="(item, index) in props.info.children" :key="index" @click="pathChild(item)">
        <div class="child-item">
          <img
            class="box-img"
            :src="
              item.value
                ? urls + item.value + '?imageView2/1/w/180/h/450/format/webp'
                : 'http://101.34.143.36:8890/api/image/387939155165253/h_450,w_180'
            "
            alt=""
          />
          <div class="child-item-btm">
            <span
              class="titles"
              :style="{
                fontSize: store.styleInfo.mintitleSize,
                fontFamily: store.styleInfo.textFamily,
                color: store.styleInfo.fontColor,
                fontWeight: 'bold',
              }"
              >{{ item.text }}</span
            >
            <span
              class="left-title"
              :style="{
                fontSize: store.styleInfo.contentSize,
                fontFamily: store.styleInfo.textFamily,
                color: store.styleInfo.fontColor,
              }"
              >{{ item.remarks }}</span
            >
          </div>
        </div>
      </t-col>
    </t-row>
  </div>
</template>

<script setup lang="ts">
import { pathList, pathListLoop } from '../route';
import { urls } from '@/utils/request/upload';
import titles from '@/components/title/title.vue';
import buttonIcon from '@/components/title/buttonIcon.vue';
import textMax from '@/components/textMax/textMax.vue';
import { onMounted } from 'vue';
import { useProjectStore } from '@/store';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const props = defineProps({
  info: {
    type: Object,
  },
});
const store = useProjectStore();
const pathChild = (e: any) => {
  store.setchildModel(e);
  router.push({
    path: route.meta.loopType ? pathListLoop[8] : pathList[8],
    query: { projectId: localStorage.getItem('projectId') },
  });
};
</script>

<style lang="less" scoped>
@import './index.less';
.boxs {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.boxs-top {
  display: flex;
  flex-direction: column;
  //   justify-content: right;
  align-items: flex-end;
  margin-bottom: 50px;
}
.child-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 420px;
}
.box-img {
  width: 100%;
  height: auto;
}
.left-title-box {
  width: 75%;
}
.img-alone {
  margin-top: 80px;
}
.titles {
  width: 100%;
  text-align: right;
  margin-top: 32px;
  margin-bottom: 24px;
}
.child-item-btm {
  display: flex;
  flex-direction: column;
  width: 100%;
}
</style>
